// Common form controls
//
// Shared size and type resets for form controls. Apply `.form-control` to any
// of the following form controls:
//
// select
// textarea
// input[type="text"]
// input[type="password"]
// input[type="datetime"]
// input[type="datetime-local"]
// input[type="date"]
// input[type="month"]
// input[type="time"]
// input[type="week"]
// input[type="number"]
// input[type="email"]
// input[type="url"]
// input[type="search"]
// input[type="tel"]
// input[type="color"]

.call-to-action {
  margin-top: 20px;
}

.form-control {
  font-size: @font-size-medium;
  .form-control-focus(@darkgray);
  margin-bottom: 20px;
  @media (max-width: @screen-xs-max) {
    font-size: 13px;
  }
}

.btn {
  &.spinner {
    position: relative;
    .spinnerInner {
      position: absolute !important;
      left: 23px !important;
      top: 22px !important;
    }
  }
}

label {
  font-weight: normal;
}

form {
  .errorGroup {
    position: relative;
    z-index: 1;
    height: 0;
    overflow: visible;
    top: -20px;
    left: 0;
  }
  .input-group + .errorGroup {
    position: inherit;
    height: auto;
  }

  .error,
  err {
    color: @midred;
    font-size: 13px;
    min-height: 23px;
  }

  .field-hint {
    font-size: 0.87em;
    color: @darkgray;
  }

  .notice {
    color: @lightyellow;
  }

  .success {
    color: @darkgreen;
    font-size: 13px;
  }

  .amount input, .amount select {
    vertical-align: bottom;
  }

  .amount .value {
    margin-right: 10px;
  }

  .helperInput {
    input {
      display: inline;
      margin: 0 5px 0 0;
    }
    label {
      display: inline;
      font-size: 12px;
    }
  }
}

.submit-btn-container {
  margin: 30px auto 20px;
  width: 50%;

  .btn {
    font-size: 16px;
    min-height: 60px;
  }

  .btn.spinner {
    padding: 0;

    .spinnerInner {
      top: 30px !important;
      left: 30px !important;
    }
  }
}

// Undo default Bootstrap invalid style for Angular-managed forms
input.ng-invalid:focus:required:invalid,
textarea.ng-invalid:focus:required:invalid,
select.ng-invalid:focus:required:invalid {
  //  color: @darkgray;
  //  border-color: @darkgray;
  //  .box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 10px rgba(0,0,0,.2)");
}

// Only mark field invalid that have been edited
input.ng-invalid.ng-dirty {
  color: @midred;
  border-color: darken(@midred, 10%);

  &:focus {
    @shadow: 0 0 6px lighten(@midred, 20%);
    .box-shadow(@shadow);
  }
}

// De-emphasize submit button if form invalid
//
// This is better than just disabling the button because this way we can handle
// a click on the button. If the user tries to submit, we can detect this and
// then show them *why* the form is not yet valid.
form.ng-invalid .btn-success {
  background: @midgray;
  border-color: @midgray;
}

.inputSpinner {
  position: absolute;
  top: 10px;
  right: 10px;
  img {
    width: 20px;
  }
}

.spinnerEnabledInput {
  position: relative;
}

.txtbtn {
  display: inline-block;
  padding: 10px;
}

.input-margin-group {
  margin-bottom: 20px;
}

.select-dropdown-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden;
  margin-bottom: 20px;
  border: 1px solid #cccccc;
  border-radius: 4px;
  -moz-border-radius: 4px;
  .dropdown-arrow-wrapper {
    position: absolute;
    top: 0;
    right: 0;
    width: 40px;
    line-height: 42px;
    background-color: #eeeeee;
    border-left: 1px solid #ccc;
    pointer-events: none;
    i.fa {
      width: 100%;
      text-align: center;
      font-size: 18px;
      vertical-align: top;
      margin-top: 12px;
    }
  }
  select {
    display: inline-block;
    margin-bottom: 0;
    &:focus {
      outline: 0 !important;
    }
    color: #000;
    color: rgba(0,0,0,0);
    text-shadow: 0 0 0 #000;
    width: 100%;
    border: medium none !important;
    outline: medium none !important;
    padding: 0;
    padding-left: 15px;
    @media (max-width: @screen-xs-max) {
      font-size: 12px;
    }
    @media (max-width: @screen-sm-max) {
      padding-left: 8px;
    }
  }
  select::-ms-expand {
    display: none;
  }
}